<template>
  <el-dialog   class="dia-style" :title="title" :visible.sync="isOpen" width="60%" append-to-body>
    <el-steps :active="active" finish-status="success">
      <el-step title="基本信息">
      </el-step>
      <el-step title="规则编辑"></el-step>
      <el-step title="执行策略"></el-step>
    </el-steps>
    <step1 ref="step1Ref" v-if="active==0"></step1>
    <step2 ref="step2Ref" v-if="active==1"></step2>
    <step3 ref="step3Ref" v-if="active==2"></step3>

    <div slot="footer" class="dialog-footer">
      <el-button v-show="active==1" style="margin-top: 12px;" @click="back">上一步</el-button>
      <el-button  v-show="active!=2" style="margin-top: 12px;" @click="next">下一步</el-button>
      <template v-if="active==2">
        <el-button type="primary" @click="submitForm">保 存</el-button>
        <el-button @click="cancel">取 消</el-button>
      </template>
    </div>
  </el-dialog>
</template>

<script>

import step1 from './updatestep1.vue'
import step2 from './updatestep2.vue'
import step3 from './updatestep3.vue'
export default {
  name: 'emitDialog',
  components:{step1,step2,step3},
  props:{
    title:{
      type:String,
      default(){
        return '编辑'
      }
    },
  },
  data() {
    return {
      isOpen: false,
      active:0,
      ruleForm:{}
    }
  },
  methods: {
    back(){
      this.active--
    },
    next() {
        if (this.active++ > 2) this.active = 0;
    },
    submitForm() {
      this.isOpen = false
    },
    cancel() {
      this.isOpen = false
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep{
  .el-step__head.is-process,.el-step__head.is-success{
    color:#2979ff !important;
    border-color:#2979ff !important;
    .el-step__line{
      color:#2979ff !important;
    }
  }
  .el-step__title.is-process,.el-step__title.is-success{
    color:#2979ff !important;
  }
}
</style>
